<template>
  <!-- 界面布局 -->
  <div class="main">
    <div class="header">
      <top-header></top-header>
    </div>
    <div class="main-container" id="scoll">
      <div class="bread-crumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="item in breadcrumbList"
            :key="item.path"
            :to="{ path: item.path, query: item.query }"
          >
            <img
              v-if="item.urlShow === 1"
              class="breadcrumb-img"
              src="@/assets/img/grzx/定位.png"
              alt
            />
            <img
              v-if="item.urlShow === 0"
              class="breadcrumb-img-left"
              src="@/assets/img/grzx/左箭头.png"
              alt
            />
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- <el-menu
          :default-active="activeIndex"
          background-color="transparent"
          text-color="#606266"
          active-text-color="#409EFF"
          mode="horizontal"
          @select="handleSelect"
        >
          <template v-for="item in menuList">
            <el-menu-item :index="item.path" :key="item.path">
              <div class="menu-style">{{ item.name }}</div>
            </el-menu-item>
          </template>
        </el-menu>-->
      </div>
      <!-- <div class="banner">
        <span :content="routerName">{{ routerName }}</span>
      </div>-->
      <!-- <div class="menu-content">
        <el-menu
          :default-active="activeIndex"
          background-color="transparent"
          text-color="#606266"
          active-text-color="#409EFF"
          mode="horizontal"
          @select="handleSelect"
        >
          <template v-for="item in menuList">
            <el-menu-item :index="item.path" :key="item.path">
              <div>{{ item.name }}</div>
            </el-menu-item>
          </template>
        </el-menu>
      </div>-->
      <div class="main-content">
        <keep-alive include="fwbp">
          <router-view />
        </keep-alive>
      </div>
      <!-- <div class="bottom">
        <span>Copyright © 2023 上海市人民检察院 版权所有</span>
      </div>-->
    </div>
  </div>
</template>
<script>
import TopHeader from "../components/top-header.vue";
export default {
  components: { TopHeader },
  data() {
    return {
      // 导航列表
      breadcrumbList: [],
      activeIndex: "/wdfb",
      breadcrumbStore: []
    };
  },
  watch: {
    // 获取导航
    "$route.path": {
      // 设置top
      handler(path) {
        this.breadcrumbList = this.$store.state.breadCrumb;
        this.breadcrumbStore = this.$store.state.breadCrumbInfo;
        this.getBreadcrumb()
      },
      immediate: true,
    },
  },
  computed: {
    routerName() {
      return this.$route.meta.name;
    },
    getPathRoute() {
      let isPath;
      if (this.$route.path === '/nlgl/wdfb' || this.$route.path === '/nlgl/fwlcbp' || this.$route.path === '/nlgl/aqrz' || this.$route.path === '/nlgl/adminMainpage') {
        isPath = true;
      } else if (this.$route.path === '/grzx/wdsq' || this.$route.path === '/grzx/wdqx' || this.$route.path === '/grzx/fwdy' || this.$route.path === '/grzx/cygjx') {
        isPath = false;
      }
      return isPath;
    }
  },
  mounted() {
    this.getRouter();
    // 管理员
    // this.breadcrumbList = this.$store.state.breadCrumb;
    // this.breadcrumbStore = this.$store.state.breadCrumbInfo;
  },
  methods: {
    getRouter() {
      if (this.$route.path === "/index") {
        this.$router.push("/mainpage");
        // if (this.$store.state.personInfo.rybm.indexOf("A000") >= 0) {
        //   // 管理员
        //   // /adminMainpage
        //   this.$router.push('/mainpage')
        // } else {
        //   // 其他
        //   this.$router.push("/mainpage");
        // }
      }
    },
    // 获取面包屑
    getBreadcrumb() {
      if (!this.$route.meta) return;
      switch (this.$route.meta.level) {
        case 1:
          this.breadcrumbList = [
            {
              name: this.$route.meta?.name,
              path: this.$route.path,
              query: this.$route.query,
              urlShow: 1
            },
          ];
          this.breadcrumbStore = [
            {
              name: this.$route.meta?.name,
              path: this.$route.path,
              query: this.$route.query,
              urlShow: 1
            },
          ]
          break;
        case 2:
          this.breadcrumbList = [
            {
              name: this.getPathRoute ? '能力管理' : '个人中心',
              path: this.getPathRoute ? '/nlgl/wdfb' : '/grzx/wdsq',
              urlShow: 1
            },
            {
              name: this.$route.meta?.name,
              path: this.$route.path,
              query: this.$route.query,
              urlShow: 2
            },
          ];
          this.breadcrumbStore = [
            {
              name: this.getPathRoute ? '能力管理' : '个人中心',
              path: this.getPathRoute ? '/nlgl/wdfb' : '/grzx',
              urlShow: 1
            },
            {
              name: this.$route.meta?.name,
              path: this.$route.path,
              query: this.$route.query,
              urlShow: 2
            },
          ]
          break;
        case "other":
          const index = this.breadcrumbList.findIndex((el) => {
            return el.path === this.$route.path;
          });
          if (index >= 0) {
            this.breadcrumbStore = this.breadcrumbList.slice(0, index + 1);
          } else {
            this.breadcrumbStore.push({
              name: this.$route.meta?.name,
              path: this.$route.path,
              query: this.$route.query,
            });
          }
          this.breadcrumbList = [
            {
              name: this.breadcrumbList[this.breadcrumbList.length - 1].name,
              path: this.breadcrumbList[this.breadcrumbList.length - 1].path,
              query: this.breadcrumbList[this.breadcrumbList.length - 1].query,
              urlShow: 0
            }
          ]
          break;
      }
      this.$store.commit("SET_BREADCRUMB", this.breadcrumbList);
      this.$store.commit("SET_BREADCRUMBINFO", this.breadcrumbStore);
    },
    // 路由跳转
    handleSelect(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 100px;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    background: #004fca;
    // background: url("~@/assets/img/header/banner.png");
    z-index: 999;
  }

  .main-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
    // 抬头
    .banner {
      width: 100%;
      height: 350px;
      // background: url("~@/assets/img/header/banner.png");
      padding: 200px 0 0 400px;
      span {
        display: inline-block;
        background: linear-gradient(to bottom, #ffff, #ffff, #e3eeff, #6fb0ff);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 42px;
        -webkit-box-reflect: below 2px
          linear-gradient(transparent, rgba(0, 0, 0, 0.5));
      }
    }
    // 面包屑
    .bread-crumb {
      width: 1540px;
      margin: 0 auto;
      height: 60px;
      background: #fff;
      padding: 100px 0 0 0px;
      .el-breadcrumb {
        position: relative;
        ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
          cursor: pointer;
        }
        .breadcrumb-img {
          position: absolute;
          top: -4px;
          left: -28px;
        }
        .breadcrumb-img-left {
          position: absolute;
          top: -1px;
          left: -22px;
        }
      }
    }

    // 路由
    .main-content {
      width: 100%;
      min-height: calc(100% - 161px);
      float: left;
      background-color: #eaeeef;
      display: flex;
      justify-content: center;
      .container {
        width: 1540px;
        margin: 25px 0;
      }
    }
    // 信息
    .bottom {
      width: 100%;
      height: 80px;
      background-color: #d6dbdc;
      text-align: center;
      line-height: 80px;
      color: #666666;
      float: left;
    }
  }
}
::v-deep .el-breadcrumb {
  margin: 23px 0;
  float: left;
  margin-right: 120px;
}

.menu-content {
  ::v-deep .el-menu--horizontal > .el-menu-item {
    margin-left: 60px;
  }
}

.menu-style {
  font-size: 16px;
}
</style>
